<!DOCTYPE html>
<!-- saved from url=(0037)http://wx.zhongfubang.com/family.html -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>我的家人</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/family.css" rel="stylesheet">

		<style type="text/css">
			.bgcolor {
				background-color: rgb(255, 91, 55) !important;
			}
			
			header .mui-title,
			header .mui-icon {
				color: #fff;
			}
		</style>
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<script>
			//console.log('a')
		</script>
		<script>
			//remove 17173 video ad
		</script>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bgcolor">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的家人</h1>
		</header>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="mui-row top-row">
							<div class="mui-col-sm-6 mui-col-xs-6" style="border-right: 1px solid rgb(199, 199, 204);">
								<a href="family.html#modal1" class="addfamily"><img src="./img/my-family.png"> <img src="./img/add.png" class="add-icon">
									<p>我的家人(人)</p>
									<p class="number">{{family_list.length}}</p>
								</a>
							</div>
							<div class="mui-col-sm-6 mui-col-xs-6">
								<a href="family.html" class="addfamily "><img src="./img/my-rights.png" style="width: 3.1rem;">
									<p>我的总权益（元）</p>
									<p id="mybalance" class="number">{{appUserTotalEquity}}</p>
								</a>
							</div>
						</div>
						<div class="mui-row familylist">
							<div class="mui-card family_card">
								<div class="mui-card-content" v-for="v in family_list">
									<div class="mui-row" style="margin-bottom: 1rem;">
										<div class="mui-col-md-6 mui-col-xs-6"><img src="./img/01ee3758158d4ba84a0d304fbe062e.png@1280w_1l_2o_100sh.png" class="family_img">
											<span class="mui-badge mui-badge-warning mui-badge-inverted">
													<template v-if="v.relationShip == 1">
														父亲
													</template>
													<template v-else-if="v.relationShip == 2">
														母亲
													</template>
													<template v-else-if="v.relationShip == 3">
														妻子
													</template>
													<template v-else-if="v.relationShip == 4">
														儿子
													</template>
													<template v-else-if="v.relationShip == 5">
														女儿
													</template>
													<template v-else>
														其他
													</template>
											</span>
											<p><button type="button" class="mui-btn mui-btn-warning btn1" @click="index();" style="font-size: 1rem;">为TA购买互助计划</button></p>
										</div>
										<div class="mui-col-md-6 mui-col-xs-6 right">
											<p class="name">
												{{v.realName}}
											</p>
											<p>总权益： &nbsp;</p>
											<p class="number">
												{{v.totalEquity}}
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="modal1" class="mui-popover">
				<div class="modal-content">
					<form class="mui-input-group">
						<div class="mui-row modal-title-row"><span class="modal-title">填写您的家人信息</span></div>
						<div class="mui-input-row"><input type="text" placeholder="您的家人的真实姓名" id="realName"></div>
						<div class="mui-input-row">
							<select id="relationShip">
								<option value="1">父亲</option>
								<option value="2">母亲</option>
								<option value="3">妻子</option>
								<option value="4">儿子</option>
								<option value="5">女儿</option>
								<option value="6">其他</option>
							</select>
						</div>
						<div class="mui-input-row"><input type="text" placeholder="身份证号码" id="idCode"></div>
						<div class="mui-button-row modal-btn-row"><button type="button" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-left textcolor" @click="add_family();">确认</button> <button type="button" onclick="mui(&#39;#modal1&#39;).popover(&#39;hide&#39;);" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right textcolor">取消</button></div>
						<div class="mui-row hr-row"><span></span></div>
					</form>
				</div>
			</div>
			<script src="./js/mui.js"></script>
			<script src="./js/jquery-1.10.2.min.js"></script>
			<script src="./js/common.js"></script>
			<script src="./js/vue.min.js"></script>
			<script>
				mui.init({
				swipeBack: true //启用右滑关闭功能
			});
				var vue = new Vue({
					el: "#app",
					data: {
						user_info: JSON.parse(localStorage.appUser),
						family_list: [],
						appUserTotalEquity: 0
					},
					methods: {
						cooperation_list: function(event) {
							var project_id = 3;
							mui.openWindow('cooperation_list.html?project_id=' + project_id, 'id', {})
						},
						applyhelp: function(event) {
							mui.openWindow('applyhelp.html', 'applyhelp', {})
						},
						showHelpList: function() {
							mui.alert("正在设计中，敬请期待");
						},
						add_family: function(event) {
							var name = $("#realName").val();
							var idCode = $("#idCode").val();
							var relationship = $("#relationShip").val();

							if(name == "") {
								mui.toast("请输入真实姓名");
								return false;
							}
							if(idCode == "") {
								mui.toast("请输入身份证");
								return false;
							}
							if(relationship == "") {
								mui.toast("请选择关系");
								return false;
							}
							var url = root + 'myCenter/addFamily';
							mui.post(url, {
									appUserId: vue.user_info.id,
									realName: name,
									idCode: idCode,
									relationShip: relationship
								},
								function(data) {
									var status = data.status;
									if(status == "success") {
										mui.toast("添加成功");
										mui('#modal1').popover('hide');
										get_family_list()
										$("#addFamilyForm")[0].reset();
									}
									if(status == "failed") {
										mui.toast(data.msg);
									}
								}, 'json'
							);
						}
					}
				})

				mui.plusReady(function() {

				})

				window.onload = load();

				function load() {
					get_family_list();
					get_app_user();
				}

				function get_family_list() {
					var url = root + 'index/selectFamilyList';
					mui.get(url, {
							appUserId: vue.user_info.id
						},
						function(result) {
							vue.family_list = result.data;
						}, 'json');

				}

				function get_app_user() {
					var url = root + 'myCenter/detailAppUser';
					mui.get(url, {
							appUserId: vue.user_info.id
						},
						function(result) {
							vue.appUserTotalEquity = result.data.totalEquity;
						}, 'json');

				}
				
				function index(){
					mui.openWindow("index.html", '', {});
				}
				
			</script>
		</div>
	</body>

</html>